<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-grid.css">
    <link rel="stylesheet" href="../css/bootstrap-reboot.css"> -->
    <!-- <link rel="stylesheet" href="http://localhost:8080/css/detail.css"> -->
    <link rel="stylesheet" href="http://localhost:8080/css/detail.css">
    <link rel="stylesheet" href="http://localhost:8080/css/menu.css">
    <link rel="stylesheet" href="http://localhost:8080/css/book.css">
    <link rel="stylesheet" href="http://localhost:8080/css/dbsrtap.css">
    <script src="http://localhost:8080/js/detile.js"></script>
    <!-- <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.bundle.js"></script> -->
    <title>豆瓣酱阅读</title>
</head>
<body>
    <div class="banner">
        <div class="left">
            <ul>
                <li><a href=""></a></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="container">
        <nav class="center">
            <ul class="breadnav">
                <li class="bread-item">出版</li>
                <li class="bread-item">小说</li>
                <li class="bread-item active">世界名著</li>
            </ul>
            <!-- <div class="menu">
                <div class="menu-left">
                    <span class="left position-relative">
                        <div id="left">
                            <a href="">分类</a>
                            <img src="../img/箭 头.png" alt="">
                        </div>

                        <div class="drop-down" id="down">
                            <div>
                                <a href="#">全部</a>
                                <a href="#">小说</a>
                                <a href="#">人文社科</a>
                                <a href="#">经济管理</a>
                                <a href="#">科技科普</a>
                                <a href="#">计算机与互联网</a>
                                <a href="#">成功励志</a>
                                <a href="#">生活</a>
                                <a href="#">少儿</a>
                                <a href="#">艺术设计</a>
                                <a href="#">漫画绘本</a>
                                <a href="#">教育考试</a>
                                <a href="#">杂志</a>
                            </div>
                            <div>
                                <a href="#">全部</a>
                                <a href="#">文学经典</a>
                                <a href="#">散文随笔</a>
                                <a href="#">日记书信</a>
                                <a href="#">演讲访谈</a>
                                <a href="#">纪实文学</a>
                                <a href="#">传记回忆</a>
                                <a href="#">诗歌及赏析</a>
                                <a href="#">戏剧曲艺</a>
                                <a href="#">寓言童话</a>
                                <a href="#">文学史</a>
                                <a href="#">文学理论与批评</a>
                                <a href="#">其他</a>
                            </div>
                        </div>
                    </span>
                    <span class="left">
                        <a href="">筛选</a>
                        <img src="../img/箭 头.png" alt="">
                    </span>
                </div>
                <div class="menu-right">
                    <span><a href="#">热度</a></span>
                    <span><a href="#">更新时间</a></span>
                    <span><a href="#">价格从低到高</a></span>
                    <span><a href="#">销量从高到低</a></span>
                    <span><a href="#">评分从高到低</a></span>
                </div>
            </div> -->
            <div class="nav db-drop">
                <div class="nav-select ">
                    <a href="#" data-click data-id="select">分类
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6" width="9" height="4" class="icon-arrow-up">
                            <path fill="#389eac" d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"></path>
                        </svg>
                    </a>
                    <a href="#" data-click>筛选
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 6" width="9" height="4" class="icon-arrow-up">
                            <path fill="#389eac" d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"></path>
                        </svg>
                    </a>
                </div>
                <div class="nav-sort">
                    <a href="#">热度</a>
                    <a href="#">更新时间</a>
                    <a href="#">价格从低到高</a>
                    <a href="#">价格从高到低</a>
                    <a href="#">评分从高到低</a>
                </div>
                <div class="db-drop-down" data-select id="select">
                    <ul class="db-drop-menu">
                        <li>全部</li>
                        <li>小说</li>
                        <li>文学</li>
                        <li>人文社科</li>
                        <li>经济管理</li>
                        <li>科技科普</li>
                        <li>计算机与互联网</li>
                        <li>成功励志</li>
                        <li>生活</li>
                        <li>少儿</li>
                        <li>艺术设计</li>
                        <li>漫画绘本</li>
                        <li>教育考试</li>
                        <li>杂志</li>
                    </ul>
                    <ul class="db-drop-menu" >
                        <li>全部</li>
                        <li>经典著作</li>
                        <li>心理学</li>
                        <li>社会学</li>
                        <li>人类学</li>
                        <li>历史</li>
                        <li>哲学</li>
                        <li>文化</li>
                        <li>宗教</li>
                        <li>政治</li>
                        <li>法律</li>
                        <li>教育学</li>
                        <li>新闻传播</li>
                        <li>编辑出版</li>
                        <li>考古</li>
                        <li>人文地理</li>
                        <li>语言文字</li>
                        <li>军事</li>
                        <li>其他</li>
                    </ul>
                </div>
            </div>
            <div class="book">
                <div class="db-card">
                    <div class="db-card-img">
                        <img src="http://localhost:8080/img/34157247.jpg" alt="封面">
                    </div>
                    <div class="db-card-text">
                        <h4>
                            <a href="https://read.douban.com/ebook/34157247/?dcs=category" title="月亮与六便士（作家榜经典）">
                                <span class="title">
                                    月亮与六便士（作家榜经典）
                                </span>
                            </a>
                        </h4>
                        <div class="author">
                            <span id="country">[英]</span>&ThinSpace;
                            <span id="writer">毛姆</span>
                            <span id="transer">徐淳刚</span>
                        </div>
                        <div class="detile">
                            吃饭，发生了会如何，不发生又会如何。 生活中，若吃饭出现了，我们就不得不考虑它出现了的事实。 我们不得不面对一个非常尴尬的事实，那就是， 一般来讲，我们都必须务必慎重的考虑考虑。
                            在这种困难的抉择下，本人思来想去，寝食难安。吃饭，发生了会如何，不发生又会如何。 生活中，若吃饭出现了，我们就不得不考虑它出现了的事实。 我们不得不面对一个非常尴尬的事实，那就是，
                            一般来讲，我们都必须务必慎重的考虑考虑。 在这种困难的抉择下，本人思来想去，寝食难安。
                        </div>
                        <div class="ext-detile">
                            <span class="style"> <a href="#">世界名著</a></span>
                            <span class="spera"></span>
                        </div>
                        <div class="card-bottom">
                            <div class="price">
                                <span class="rmb-tag">￥</span>
                                <span class="old-price">39.99</span>
                                <span class="now-price">3.99</span>
                            </div>
                            <div class="buttons">
                                <span class="shopping">
                                    <a href="#">
                                        <img src="http://localhost:8080/img/shopcard.png" alt="购物车">
                                    </a>
                                </span>
                                <button>加入书单</button>
            
                            </div>
                        </div>
                    </div>
                </div>
                <div class="db-card">
                    <div class="db-card-img">
                        <img src="http://localhost:8080/img/34157247.jpg" alt="封面">
                    </div>
                    <div class="db-card-text">
                        <h4>
                            <a href="https://read.douban.com/ebook/34157247/?dcs=category" title="月亮与六便士（作家榜经典）">
                                <span class="title">
                                    月亮与六便士（作家榜经典）
                                </span>
                            </a>
                        </h4>
                        <div class="author">
                            <span id="country">[英]</span>&ThinSpace;
                            <span id="writer">毛姆</span>
                            <span id="transer">徐淳刚</span>
                        </div>
                        <div class="detile">
                            吃饭，发生了会如何，不发生又会如何。 生活中，若吃饭出现了，我们就不得不考虑它出现了的事实。 我们不得不面对一个非常尴尬的事实，那就是， 一般来讲，我们都必须务必慎重的考虑考虑。
                            在这种困难的抉择下，本人思来想去，寝食难安。吃饭，发生了会如何，不发生又会如何。 生活中，若吃饭出现了，我们就不得不考虑它出现了的事实。 我们不得不面对一个非常尴尬的事实，那就是，
                            一般来讲，我们都必须务必慎重的考虑考虑。 在这种困难的抉择下，本人思来想去，寝食难安。
                        </div>
                        <div class="ext-detile">
                            <span class="style"> <a href="#">世界名著</a></span>
                            <span class="spera"></span>
                        </div>
                        <div class="card-bottom">
                            <div class="price">
                                <span class="rmb-tag">￥</span>
                                <span class="old-price">39.99</span>
                                <span class="now-price">3.99</span>
                            </div>
                            <div class="buttons">
                                <span class="shopping">
                                    <a href="#">
                                        <img src="http://localhost:8080/img/shopcard.png" alt="购物车">
                                    </a>
                                </span>
                                <button>加入书单</button>
            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    
</body>

</html>